<template>
  <my-big-dialog title="Order History">
    <!-- :title="getTitle()"
    :title-class="'sub-header'" -->

  <q-table
    class="my-table"
    :rows="rows"
    :columns="cols"
    :rows-per-page-options="[5]"
    @row-click="onRowClick"
    :pagination="pagination"
    wrap-cells
  >
    <template v-slot:body-cell="props">
      <q-td>
        {{ props.value }}
      </q-td>
    </template>

    <!-- <template v-slot:body-cell-check_in="props">
      <q-td>
        {{
          props.row.check_in == null
            ? ''
            : formatDateTimeString(props.row.check_in)
        }}
      </q-td>
    </template>

    <template v-slot:body-cell-check_out="props">
      <q-td>
        {{
          props.row.check_out == null
            ? ''
            : formatDateTimeString(props.row.check_out)
        }}
      </q-td>
    </template> -->

    <template v-slot:body-cell-order_no="props">
      <q-td>
        {{ props.row.order_no }}
      </q-td>
    </template>

    <template v-slot:body-cell-result="props">
      <q-td>
        <div
          class="status-box"
          :class="getOrderStatusColor(props.row.status)"
        >
      </div>
        <div class="">
          {{ props.row.status }}
        </div>
      </q-td>
    </template>
  </q-table>
</my-big-dialog>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getOrderStatusColor } from 'src/utils/getPublic';
import { mainRecord } from 'src/services/maintenaceRecordService';
import MyBigDialog from '../container/MyBigDialog.vue';

const p_props = withDefaults(
  defineProps<{
    stockCode: string;
    serial_no: string;
  }>(),
  {}
);

const rows = ref<History[]>([]);
const align = 'left';
const cols = [
  {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  {
    name: 'check_in',
    label: 'Check In',
    field: 'check_in',
    format:(val:string)=>{
      if (val){
        const arr = val.split('T')
        return arr[0]
      }
      return ''
    },
    sortable: true,
    align,
  },
  {
    name: 'check_out',
    label: 'Check Out',
    field: 'check_out',
    sortable: true,
    format:(val:string)=>{
      if (val){
        const arr = val.split('T')
        return arr[0]
      }
      return ''
    },
    align,
  },
  {
    name: 'order_no',
    label: 'Order No',
    field: 'order_no',
    sortable: true,
    align,
  },
  {
    name: 'result',
    label: 'Result',
    field: 'test_result',
    sortable: true,
    align,
  },
];
const pagination = {
  sortBy: '-order_no',
};

async function init() {

  const records = await mainRecord(
    p_props.stockCode,
    p_props.serial_no,
    true
  )
  console.log(records.data.data);
  rows.value = records.data.data;

}

init();
function getTitle() {
  return `Order History - Serial No : ${p_props.serial_no}`;
}

function onRowClick(evt: any, row: any) {
  if (row.order_id){
    window.location.href = `/maintenance/order/${row.order_id}`;
  }
  if (row.main_record_id){
    window.location.href = `/maintenance/record/${row.main_record_id}`;
  }

  /* router.push({path:`/maintenance/order/${row.repair_order.id}`, replace: true}) */
}
</script>
<style scoped></style>
